<template>
  <div>
    <x-header :left-options="{showBack: showLeft,backText:leftText}" class="headerBox">
      <span>{{title}}</span>
      <div v-if="showRight" slot="right" class="headRight">
        <img src="../assets/images/nav-more2.png" alt @click="menuNav=!menuNav" />
      </div>
    </x-header>
    <x-dialog
      v-model="menuNav"
      :dialog-style="{'max-width': '100%', width: '100%', height: '100%', 'background-color': 'transparent'}"
      class="menuNavBox">
      <div class="closeBox">
        <img src="../assets/images/close-nav2.png" alt @click="menuNav=false" />
      </div>
      <div class="menuContent">
        <div class="menuTitle">快速导航</div>
        <div class="menuList clearfix">
          <router-link to="/" class="menuItem">
            <img src="../assets/images/nav-index.png" alt />
            <div>首页</div>
          </router-link>
          <router-link to="cart" class="menuItem">
            <img src="../assets/images/nav-cart.png" alt />
            <div>购物车</div>
          </router-link>
          <router-link to="search" class="menuItem">
            <img src="../assets/images/nav-search.png" alt />
            <div>搜索</div>
          </router-link>
          <router-link to="classify" class="menuItem">
            <img src="../assets/images/nav-cate.png" alt />
            <div>全部分类</div>
          </router-link>
          <router-link to="mine" class="menuItem">
            <img src="../assets/images/nav-my.png" alt />
            <div>我的易购</div>
          </router-link>
        </div>
      </div>
    </x-dialog>
  </div>
</template>

<script>
 import { XHeader, XDialog } from 'vux'
export default {
  components: {
    XHeader,
    XDialog,
  },
  props: {
      title: {
          type: String,
          default: ''
      },
      showRight:{
          type: Boolean,
          default:true
      },
      showLeft:{
          type: Boolean,
          default:true
      },
      leftText:{
          type: String,
          default:''
      },
  },
  data() {
      return {
          menuNav: false
      }
  },
    }
</script>

<style lang="less" scoped>
// 头部导航
/deep/.headerBox {
  z-index: 9;
  background-color: #fff;
  .vux-header-left {
    left: 24px;
    .vux-header-back {
      color: #000;
    }
    .left-arrow:before {
      border-color: #000;
    }
  }
  .vux-header-title {
    color: #000;
    margin: 0 100px;font-size: 34px;
  }
  .headLeft {
    img {
      width: 60px;
      margin-top: -16px;
    }
  }
  .headRight {
    img {
      width: 60px;
      margin-top: -10px;
    }
  }
  .hotHint {
    width: 450px;
    margin-top: 15px;
  }
}
// 头部菜单弹框
.menuNavBox {
  .closeBox {
    text-align: right;
    margin-top: 10px;
    margin-right: 30px;
    img {
      width: 60px;
    }
  }
  .menuContent {
    margin: 20px;
    padding: 20px;
    border-radius: 20px;
    background-color: #fff;
    position: relative;
    &::before {
      border-bottom: 20px solid #fff;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      display: block;
      content: '';
      position: absolute;
      top: -20px;
      right: 24px;
    }
    .menuTitle {
      font-size: 30px;
      padding: 20px;
      text-align: left;
    }
    .menuList {
      .menuItem {
        float: left;
        width: 23%;
        margin: 1%;
        background-color: #f7f7f7;
        padding: 20px;
        box-sizing: border-box;
        border-radius: 20px;
        img {
          width: 50%;
        }
        div {
          color: #666;
        }
      }
    }
  }
}
</style>